<template>
  <div>
    <div v-for="item in rankingSongData" class="bigBox">
      <img :src="item.picUrl" alt="" class="picUrl" />
      <el-table
        :data="item.songs"
        class="table"
        @row-dblclick="dblclick"
        v-loading="loading"
      >
        <el-table-column prop="name"></el-table-column>

        <el-table-column>
          <template #default="scope">
            <span
              v-for="item in scope.row.singers"
              class="artistName"
              @click="toSingerPage(item.id)"
            >
              {{ item.name + "     " }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { getSongRanking, getSongListContent, getSongUrl } from "../../service/songs";
import { storage } from "@/stores/storage";
import router from "../../router";
import { getArtistNames, getSongtime } from "../../utils/practicalFun";
export default defineComponent({
  mounted() {
    this.getSongRankingFun();
  },
  setup() {
    let store = storage();
    let loading = ref(true);
    const { rankingSongData, songPlayList, isImmediatelyPlay } = storeToRefs(store);
    function getSongRankingFun() {
      getSongRanking()
        .then((res) => {
          if (res.status === 200) {
            let tableData = ref([]);
            let data = res.data.list;
            for (let i = 0; i < data.length; i++) {
              tableData.value[i] = {};
              tableData.value[i].name = data[i].name;
              tableData.value[i].picUrl = data[i].coverImgUrl;
              tableData.value[i].albumId = data[i].id;
              getSongListContent(tableData.value[i].albumId)
                .then((res) => {
                  let songs = [];
                  if (res.status === 200) {
                    let songData = res.data.playlist.tracks;
                    for (
                      let i = 0;
                      i < (songData.length > 5 ? 5 : songData.length);
                      i++
                    ) {
                      songs[i] = {};
                      songs[i].name = songData[i].name;
                      songs[i].id = songData[i].id;
                      songs[i].albumId = songData[i].al.id;
                      songs[i].albumName = songData[i].al.name;
                      songs[i].playTime = getSongtime(songData[i].dt);
                      songs[i].singers = getArtistNames(songData[i].ar);
                      songs[i].picUrl = songData[i].al.picUrl;
                    }
                    tableData.value[i].songs = songs;
                  } else {
                    ElMessage("数据获取失败");
                  }
                })
                .catch((err) => {
                  ElMessage("网络错误,请重新尝试");
                });
            }
            store.setRankingSongData(tableData.value);
            loading.value = false;
          }
        })
        .catch((res) => {
          ElMessage("网络错误,请重新尝试");
        });
    }
    function toSingerPage(id) {
      store.setSingerId(id);
      router.push({
        path: "/singer",
      });
    }
    async function dblclick(row) {
      let songUrl = "";
      await getSongUrl(row.id)
        .then((res) => {
          songUrl = res.data.data[0].url;
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
      if (songUrl) {
        store.addSongPlayList(row.id, row.name, songUrl, row.picUrl);
        store.changeIsImmediatelyPlay();
      }
    }

    return {
      rankingSongData,
      getSongRankingFun,
      dblclick,
      toSingerPage,
      loading,
    };
  },
});
</script>

<style scoped>
.bigBox {
  position: relative;
  width: 1000px;
  height: 300px;
}
.picUrl {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
}
.table {
  position: absolute;
  width: 700px;
  height: 220px;
  top: 30px;
  right: 0;
}
.artistName {
  white-space: pre;
}
.artistName:hover {
  color: black;
  cursor: pointer;
}
</style>
